/**
 * 库存信息管理
 */
import React, { Component } from 'react'
import './TableInfo.scss';
//引入图片库
import imagesStore from '../../assets/lib/imagesStore'
// 导入对话框组件
import Details from '../../components/Details'


export default class TableInfo extends Component {
    constructor(props) {
        super(props);
        // 相当于 Vue 的 data 数据源
        this.state = {
            // 表格数据
            userInfo: [],
            // 是否是修改状态
            isModify: false,
            //限制只显示13条数据
            paginationInfo:[],
            pagination:10,
            indexNub:[]
        }
    }

     // 生命周期导入数据
    componentDidMount() {
        React.axios(`/store-manage/gw1901/goods-manage-g4/goods-info.php`).then(res => {
            this.setState({
                userInfo: res.data
            });
            // 对数据进行页数编辑
            this.setState({
                // 截取十三条数据
                paginationInfo : this.state.userInfo.slice(
                // 开始位置
                    this.state.pagination-10,
                // 结束位置
                    this.state.pagination
                )
            })
            // 定义并向上取整页数
            const pageNumber=Math.ceil((this.state.userInfo.length)/10)
            for(let i=1;i<pageNumber+1;i++){
                this.setState({
                    indexNub:[...this.state.indexNub,i]
                })
            }
        });
    }

    /**
     * 显示角色详情
     * @param { Object } info 角色数据对象
     */
    showDetail(info) {
        this.setState({
            showState: true,
            dialogContent: info
        });
    }

    /**
     * 数据对象的修改（编辑阶段）
     * @param { Number } index 数据对象的索引
     */
    editUserInfo(index) {
        this.setState({
            isModify: true,
            // 让表单显示当前的各项数据
            goodsName: this.state.userInfo[index].goodsName,
            brand: this.state.userInfo[index].brand,
            goodsID: this.state.userInfo[index].goodsID,
            model: this.state.userInfo[index].model,
            category: this.state.userInfo[index].category,
            intoDatetime: this.state.userInfo[index].intoDatetime,
            quantity: this.state.userInfo[index].quantity,
            price: this.state.userInfo[index].price,
        });
        // 修改索引的值
        this.modifyIndex = index;
    }

    /**
     * 数据对象的修改（确认阶段）
     */
    modifyUserInfo() {
        // 修改表格当前行的数据
        this.state.userInfo.splice(this.modifyIndex,1,{
            goodsName: this.state.goodsName,
            brand: this.state.brand,
            goodsID: this.state.goodsID,
            model: this.state.model,
            category: this.state.category,
            intoDatetime: this.state.intoDatetime,
            quantity: this.state.quantity,
            price: this.state.price,
        });
        // 更新用户信息数组
        this.setState({
            userInfo: this.state.userInfo,
            isModify: false
        }); 
        // 重置数据
        this.formReset();
    }

    /**
     * 数据对象的删除
     * @param { Number }  数据对象的索引
     */
    delInfo = (res) =>{ 
        if(window.confirm("您确定要删除这条数据么？")){
            // 利用后台的删除直接传ID删除
            React.axios.get(`/store-manage/gw1901/goods-manage-g4/goods-delete.php?goodsID=${res.goodsID}`,{}).then(del =>{
                alert(del.data)
                // 方法一 再次获取远端数据接口并渲染界面
                React.axios.get(`/store-manage/gw1901/goods-manage-g4/goods-info.php`).then(info =>{
                this.setState({
                    paginationInfo:info.data
                })
                })
                // 方法二 删除成功后刷新页面
                // window.location.reload();
            })
        }
        
    }

    // 关闭对话框
    closeDtails = () => {
        this.setState({
            showState: false
        });
    }

    // 首页 
    firstpage = () =>{
        //初始化首页的信息条数
        this.setState({
            pagination:10 
        })
        this.setState(state => {
            //截取13条数据
            state.paginationInfo = state.userInfo.slice(
                 //开始位置
                state.pagination - 10,
                 //结束位置
                state.pagination
            )
        })
    }
    
    // 上一页
    SelectPageUp = () =>{
        if(this.state.pagination>10){
            this.setState({
                pagination:this.state.pagination - 10
            })
            this.setState(state =>{
                //截取13条数据
                state.paginationInfo = state.userInfo.slice(
                //开始位置
                state.pagination - 10,
                //结束位置
                state.pagination
            );
            });
        }else{
            alert("少年，这可是第一页了哟!")
        }
    }

    // 下一页
    pageDown = () =>{
        if(this.state.pagination > this.state.userInfo.length){
            alert("少年，已经是最后一页了哟!")
        }else{
            this.setState({
                pagination:this.state.pagination + 10
            });
            this.setState(state =>{
                  //截取13条数据
                state.paginationInfo = state.userInfo.slice(
                //开始位置
                state.pagination - 10,
                //结束位置
                state.pagination
            );
            })
        }
    }
    // 尾页
    lastPage = () =>{
        //向上取整
        const nub=Math.ceil((this.state.userInfo.length)/10)*10;
        this.setState({
            pagination:nub,
        })
        this.setState(state =>{
            //截取13条数据
        state.paginationInfo = state.userInfo.slice(
          //开始位置
            state.pagination - 10,
          //结束位置
            state.pagination
        );
        })
    }

    // 制定页面
    IndexNub = (ind) =>{
        this.setState({
            pagination:10*(ind+1)
        })
        this.setState(state =>{
            //截取13条数据
        state.paginationInfo = state.userInfo.slice(
          //开始位置
            state.pagination - 10,
          //结束位置
            state.pagination
        );
        })
    }

    //渲染界面
    render() {
        return (
            <div className="container">

                {/* 内容标题 */}
                <div className="title3">
                    <img 
                        src={imagesStore.img1} 
                        alt="图片加载中" 
                    />
                    <div className="title-text">
                        <h2>绝学信息管理</h2>
                    </div>
                </div>

                {/* 表单内容 */}
                <form>
                    <div className="tableContent">
                        <table cellSpacing="0" cellPadding="10PX" >
                        {/* 表头内容 */}
                            <thead align="left">
                                <tr>
                                    <th>序号</th>
                                    <th>品牌</th>
                                    <th>名称</th>
                                    <th>型号</th>
                                    <th>分类</th>
                                    <th>入库时间</th>
                                    <th>单价</th>
                                    <th>数量</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            {/* 表格内容 */}
                            <tbody align="left">
                                {this.state.paginationInfo.map((res,index) => (<tr key={res.goodsID}>
                                    <td>{res.goodsID}</td>
                                    <td>{res.brand}</td>
                                    <td>{res.goodsName}</td>
                                    <td>{res.model}</td>
                                    <td>{res.category}</td>
                                    <td>{res.intoDatetime}</td>
                                    <td>{res.price}</td>
                                    <td>{res.quantity}</td>
                                    <td>

                                        {/* 详情 */}
                                        <button type="button" onClick={() => this.showDetail(res)}>
                                            <img 
                                                src={imagesStore.img6} 
                                                alt="图片加载中" 
                                            />
                                        </button>

                                        {/* 修改数据并且传参 */}
                                        <button onClick={() => this.props.history.push({
                                                pathname: "/FormInfo",
                                                state: {
                                                    goodsId: res
                                                }
                                            })}>
                                                <img 
                                                        src={imagesStore.img3} 
                                                        alt="图片加载中" 
                                                />
                                        </button>

                                         {/* 删除 */}
                                        <button type="button" onClick={() => this.delInfo(res)}>
                                            <img 
                                                    src={imagesStore.img5} 
                                                    alt="图片加载中" 
                                            />
                                        </button>
                                    </td>
                                </tr>))}
                            </tbody>
                        </table>
                         {/* 对话框 */}
                        <Details
                            showState={this.state.showState}
                            dialogContent={this.state.dialogContent}
                            closeDtails={this.closeDtails}
                        />
                    </div>
                </form>
                {/* 分页 */}
                <div className="page" aria-label="Page navigation example">
                    <ul className="pagination">
                        <li className="page-item">
                            <button className="page-link" onClick={()=>this.firstpage()}>
                                首页
                            </button>
                        </li>
                        <li className="page-item">
                            <button className="page-link" onClick={()=>this.SelectPageUp()}>
                                上一页
                            </button>
                        </li>
                        {
                        this.state.indexNub.map((res,ind)=>(
                            <li className="page-item" key={res}>
                                <button
                                style={{backgroundColor:(this.state.pagination)===ind*10+10?"skyblue":"beige"}}
                                className="page-link" onClick={()=>this.IndexNub(ind)}>{res}
                                </button>
                            </li>
                            ))
                        }
                        <li className="page-item">
                            <button className="page-link" onClick={()=>this.pageDown()}>
                                下一页
                            </button>
                        </li>
                        <li className="page-item">
                            <button className="page-link" onClick={()=>this.lastPage()}>
                                尾页
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        )
    }
}
